<!-- 商户详情 -->
<script setup>
// 一级分类
const categoryList = ref([
    {
        id: '10',
        name: '热销必点'
    },
    {
        id: '20',
        name: '休闲零食'
    },
    {
        id: '30',
        name: '糖果/巧克力'
    },
    {
        id: '40',
        name: '饮料/矿泉水'
    },
    {
        id: '50',
        name: '乳制品'
    }
]);
// 二级分类及商品列表
const goodsList = ref([
    {
        cid: '1',
        cname: '数码产品',
        clist: [
            {
                goodId: '1001',
                goodImg: '',
                goodName: '小米手环8 Pro 原定制吧',
                goodPrice: '399.00'
            },
            {
                goodId: '1002',
                goodImg: '',
                goodName: '小米手机 K70s',
                goodPrice: '499.00'
            }
        ]
    },
    {
        cid: '2',
        cname: '宠物用品',
        clist: [
            {
                goodId: '1001',
                goodImg: '',
                goodName: '狗粮精选',
                goodPrice: '79.00'
            },
            {
                goodId: '1002',
                goodImg: '',
                goodName: '鹦鹉专用',
                goodPrice: '59.00'
            }
        ]
    }
]);
//点击选中一级分类
const activieIndex = ref(0);
const activieItem = (index) => {
    activieIndex.value = index;
    // 发起request请求，将值赋给goodsList
};

// top tab
const tabCurrent = ref(0);
const tabAll = ref([
    {
        title: '商品'
    },
    {
        title: '店铺'
    },
    {
        title: '评价'
    }
]);
const onTopbarChange = (index) => {
    tabCurrent.value = index;
};
const getMore = () => {
    uni.showToast({
        title: '点击 公告的 优惠提示！',
        duration: 2000
    });
};
</script>
<template>
    <view class="container">
        <!-- 商铺名称 卡片 -->
        <!-- <view class="shop"> -->
        <uni-card title="公告" :is-shadow="false">
            <view style="display: flex; flex-direction: row; width: 100vm; margin-bottom: 10rpx">
                <text class="delivery-min-cost">¥10</text>
                起送 |
                <view class="tag-view" style="margin-left: 10rpx">
                    <uni-tag text="免费配送" type="success" />
                </view>
            </view>
            <uni-notice-bar show-get-more show-icon text="满15.0元送随机零食！" @getmore="getMore" />
        </uni-card>
        <!-- </view> -->

        <!-- top_tab分类 -->
        <view class="top_bar">
            <view v-for="(item, index) in tabAll" :class="{ item_active: index === tabCurrent }" class="item" @tap="onTopbarChange(index)" :key="index">
                <text>{{ item.title }}</text>
            </view>
        </view>
        <!-- 1. 商品 -->
        <view class="categories" v-if="tabCurrent === 0">
            <!-- 左侧：一级分类 -->
            <scroll-view class="primary" scroll-y>
                <view v-for="(item, index) in categoryList" :key="item" class="item" @tap="activieItem(index)" :class="{ active: index === activieIndex }">
                    <text class="name">{{ item.name }}</text>
                </view>
            </scroll-view>
            <scroll-view class="secondary" scroll-y>
                <BannerSwiper></BannerSwiper>
                <!-- 内容区域 -->
                <!-- <view class="panel" v-for="item in goodsList" :key="item.cid"> -->
                <!--     <view class="title">
                        <text class="name">{{ item.cname }}</text>
                        <navigator class="more" hover-class="none">全部</navigator>
                    </view> -->
                <view class="section">
                    <navigator v-for="goods in goodsList[0].clist" :key="goods.goodId" hove r-class="none" :url="'/pages/goods/goods?id=' + goods.goodId">
                        <view class="goods">
                            <image src="@/static/temp/duck.jpeg" class="image" mode="aspectFill"></image>
                            <view class="g-label">
                                <view class="name ellipsis">{{ goods.goodName }}</view>
                                <br />
                                <view class="price-box">
                                    <text class="discounted-price">¥{{ goods.goodPrice }}</text>
                                    <text class="original-price">¥20.8</text>
                                </view>
                                <view class="g-discount">9折，限200份</view>
                            </view>
                            <image src="@/static/icon/icn_plus.png" class="g-add-cart"></image>
                        </view>
                    </navigator>
                </view>
                <!-- </view> -->
            </scroll-view>
        </view>
        <!-- 2.店铺 -->
        <view v-if="tabCurrent === 1">店铺</view>

        <!-- 3.评论 -->
        <view v-if="tabCurrent === 2">评论</view>
    </view>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    background-color: $uni-bg-color-grey;
}
.delivery-min-cost {
    color: $font-color-selected;
    font-size: 28rpx;
}
// top tab
.top_bar {
    display: flex;
    width: 100vm;
    text-align: center;
    background-color: $uni-bg-color;
    padding: 20rpx;
    font-size: $list-font-lg;
    .item {
        color: $uni-color-title;
        margin-right: 40rpx;
        border-bottom: 4rpx solid #uni-bg-color;
        text {
            padding: 30rpx 0;
        }
    }
    .item_active {
        color: $font-color-selected;
        border-bottom: 4rpx solid $font-color-selected;
    }
}

// 分类
.categories {
    flex: 1;
    min-height: 400rpx;
    display: flex;
}
// 一级分类
.primary {
    overflow: hidden;
    width: 180rpx;
    flex: none;
    background-color: #f6f6f6;
    .item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 96rpx;
        font-size: $list-font-base;
        color: #595c63;
        position: relative;
        &::after {
            content: '';
            position: absolute;
            left: 42rpx;
            bottom: 0;
            width: 96rpx;
            border-top: 1rpx solid #e3e4e7;
        }
    }
    .active {
        background-color: #fff;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 4rpx;
            height: 100%;
            background-color: $font-color-selected;
        }
    }
}
.primary .item:last-child::after,
.primary .active::after {
    display: none;
}
// 二级分类
.secondary {
    background-color: #fff;
    .carousel {
        height: 200rpx;
        margin: 0 30rpx 20rpx;
        border-radius: 4rpx;
        overflow: hidden;
    }
    .panel {
        margin: 0 30rpx 0rpx;
    }
    .title {
        height: 60rpx;
        line-height: 60rpx;
        color: #333;
        font-size: 28rpx;
        border-bottom: 1rpx solid #f7f7f8;
        .more {
            float: right;
            padding-left: 20rpx;
            font-size: 24rpx;
            color: #999;
        }
    }
    .more {
        &::after {
            font-family: 'erabbit' !important;
            content: '\e6c2';
        }
    }
    .section {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 20rpx 0;
        padding-left: 20rpx;
        .goods {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 0rpx 30rpx 40rpx 0;
            &:nth-child(3n) {
                margin-right: 0;
            }
            .image {
                width: 150rpx;
                height: 150rpx;
            }
            .g-label {
                align-self: flex-start;
                display: flex;
                height: 150rpx;
                margin-left: 10rpx;
                flex-direction: column;
                flex: 1;
                .g-discount {
                    display: flex;
                    font-size: $list-font-sm;
                    color: $font-color-selected;
                    align-items: flex-end;
                    margin-left: 2rpx;
                }
            }
            .name {
                padding: 5rpx;
                font-size: 22rpx;
                color: #333;
                margin-bottom: 5rpx;
            }
        }
    }
}
.g-item {
    display: flex;
    flex-direction: row;
}
.price-box {
    padding-left: 2rpx;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    width: 140rpx;
    .discounted-price {
        font-size: $list-font-lg;
        margin-top: 5rpx;
        color: orange;
        font-weight: bold;
        justify-content: left;
    }
    .original-price {
        font-size: $list-font-sm;
        text-decoration: line-through;
        color: $font-color-light;
        margin-left: 8rpx;
    }
}
.g-add-cart {
    margin-right: 10rpx;
    width: 40rpx;
    height: 40rpx;
}
</style>
